<template>
  <div class="form_wrap">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm" size="default"
      status-icon>
      <!-- <el-form-item label="题库" prop="bankIdList">
        <el-select multiple v-model="ruleForm.bankIdList" placeholder="请选择题库">
          <el-option v-for="(item, index) in questionBankList" :key="index" :label="item.code" :value="item.id" />
        </el-select>
      </el-form-item> -->
      <el-form-item label="题目类别" prop="itemType">
        <el-select v-model="ruleForm.itemType" placeholder="请选择题目类别" @change="handleSelectQuestionType">
          <el-option v-for="(item, index) in questionTypeList" :key="index" :label="item.label" :value="Number(item.value)" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="问题标题" prop="itemText">
        <el-input type="textarea" v-model="ruleForm.itemText" show-word-limit maxlength="255" />
      </el-form-item>
      <el-form-item label="分数" prop="score">
        <el-input v-model="ruleForm.score" />
      </el-form-item>
      <el-form-item label="排序" prop="sort">
        <el-input v-model="ruleForm.sort" />
      </el-form-item>
      <el-form-item v-for="(item, index) in ruleForm.optionList" :key="index" :label="item.label + (index + 1)"
        :prop="'optionList.' + index + '.value'" :rules="{
        required: true,
        message: '请输入问题选项',
        trigger: 'blur',
      }">
        <div class="box">
          <el-input class="ipt" v-model="item.value"></el-input><el-button type="danger" :icon="Delete"
            @click="handleDel(index)">删除</el-button>
        </div>
      </el-form-item>
      <el-form-item label="" v-show="ruleForm.itemType == '0' || ruleForm.itemType == '1'">
        <el-button type="primary" :icon="Plus" @click="handleAddOption">新增选项</el-button>
      </el-form-item>
      <el-form-item label="答案提示">
        <el-input type="textarea" v-model="ruleForm.answerTip" show-word-limit maxlength="255" />
      </el-form-item>
      <el-form-item label="正确答案" prop="answer">
        <el-input type="textarea" v-model="ruleForm.answer" show-word-limit maxlength="255" />
      </el-form-item>
      <el-form-item label="是否有效" v-if="dialogType=='edit'">
        <el-radio-group v-model="ruleForm.isValid" size="large">
          <el-radio-button :label="1">是</el-radio-button>
          <el-radio-button :label="0">否</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm(ruleFormRef)">
          保存
        </el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { Plus, Delete } from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { ref,reactive,onMounted } from 'vue'
import api from '@/apiMod'
interface Props {
  id: string,
  dialogType:string
}
interface RuleForm {
  answer: string
  answerTip: string
  itemType: string
  itemTypeLabel: string
  itemText: string
  isValid: number
  optionList: Array<any>
  option1?: string
  id?: string
  bankId: string
  bankIdList?: Array<string>
  score: number
  sort: number
  
}
const emit = defineEmits<{
  (e: 'close')
}>()
const props = defineProps<Props>()
const ruleFormRef = ref<FormInstance>()
let ruleForm = ref<RuleForm>({
  answer: '',
  answerTip: '',
  itemText: '',
  isValid: 1,
  itemType: '',
  itemTypeLabel: '',
  optionList: [],
  bankId: props.id,
  bankIdList: [props.id],
  score: null,
  sort: null
})
const questionTypeList = ref([])
// const questionBankList = ref([])
onMounted(() => {
  getQuestionTypeList()
  // getQuestionBankList()
})
const handleDetail = async (id) => {
  const res = await api.view_bscQuestionItem_view(id)
  if (res.data.itemType == 0 || res.data.itemType == 1) {
    res.data.optionList = res.data.option1.split(',').map((item, index) => {
      return {
        label: '问题选项',
        value: item
      }
    })
  }
  ruleForm.value = res.data
  // if(res.data.bankId){
  //   ruleForm.value.bankIdList = res.data.bankId.split(",")
  // }
  
}
const rules = reactive<any>({
  answer: [
    { required: true, message: '请输入正确答案', trigger: 'blur' }
  ],
  itemText: [
    { required: true, message: '请输入问题标题', trigger: 'blur' }
  ],
  itemType: [
    { required: true, message: '请选择题目类别', trigger: 'change' }
  ],
  // bankIdList: [
  //   { required: true, message: '请选择题库', trigger: 'change' }
  // ],
  score: [
    { required: true, message: '请输入分数', trigger: 'blur' }
  ],
  sort: [
    { required: true, message: '请输入排序', trigger: 'blur' }
  ]
})
const handleSelectQuestionType = (val: string) => {
  ruleForm.value.itemTypeLabel = questionTypeList.value.filter(item => item.value == val)[0].label
}
const getQuestionTypeList = async () => {
  const res = await api.getDictItemList('QUESTIONTYPE')
  questionTypeList.value = res.data.QUESTIONTYPE
}
const handleAddOption = () => {
  ruleForm.value.optionList.push({
    label: '问题选项',
    con: ''
  })
}
const handleDel = (index: number) => {
  ruleForm.value.optionList.splice(index, 1)
}

// const getQuestionBankList = async () => {
//   const params = {
//     pageParaPO: {
//       current: 1,
//       size: 100000
//     }
//   }
//   const res = await api.view_bscQuestionBank_page(params)
//   questionBankList.value = res.data.records
// }

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  if(ruleForm.value.score || ruleForm.value.score==0){
    ruleForm.value.score = Number(ruleForm.value.score)
  }
  if(ruleForm.value.isValid||ruleForm.value.isValid===0){
    ruleForm.value.isValid = Number(ruleForm.value.isValid)
  }
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      if (ruleForm.value.id) {
        ruleForm.value.option1 = ruleForm.value.optionList.map(item => item.value).join(',')
        delete ruleForm.value.optionList
        const res = await api.view_bscQuestionItem_edit(ruleForm.value)
        if (res.code == 0) {
          ElMessage.success('修改成功')
          emit('close')
        }
      } else {
        // ruleForm.value.bankId = ruleForm.value.bankIdList.join(',')
        // delete ruleForm.value.bankIdList
        ruleForm.value.bankId = props.id
        ruleForm.value.option1 = ruleForm.value.optionList.map(item => item.value).join(',')
        delete ruleForm.value.optionList
        const res = await api.view_bscQuestionItem_add(ruleForm.value)
        if (res.code == 0) {
          ElMessage.success('添加成功')
          emit('close')
        }
      }

    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
defineExpose({ handleDetail,ruleFormRef })

</script>

<style scoped lang="scss">
.box {
  display: flex;
  width: 100%;

  .ipt {
    flex: 1;
    margin-right: 10px;
  }
}</style>